<!DOCTYPE html>
<html style="height: 100%">
<head>
    <meta charset="utf-8">
    <script src="../plugins/incubator-echarts-4.2.1/dist/echarts.js"></script>
    <script src="../plugins/incubator-echarts-4.2.1/map/js/china.js"></script>
    <script src="../plugins/vue/axios-0.18.0.js"></script>
</head>
<body style="height: 100%; margin: 0">
<div id="container" style="height: 100%"></div>
<script type="text/javascript">
    var dom = document.getElementById("container");
    var myChart = echarts.init(dom);

    axios.get("http://api.tianapi.com/txapi/ncovcity/index?key=9a7342c0f4b1f34abf69abdea5f61e9f").then((res)=>{

        var newslist = res.data.newslist;
        //累计确诊
        var currentConfirmedCount = [];
        for (var i = 0; i < newslist.length; i++) {
            //累计确诊
            var json = {
                name: newslist[i].provinceShortName,
                value: newslist[i].currentConfirmedCount,
            }
            currentConfirmedCount.push(json);
        }
        var option = {
            title : {
                text: '疫情地图',
                subtext: '来自nimo',
                x:'center'
            },
            tooltip : {//提示框组件。
                trigger: 'item'//数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。
            },
            legend: {
                orient: 'horizontal',//图例的排列方向
                x:'left',//图例的位置
                data:['现有确诊']
            },

            visualMap: {//颜色的设置  dataRange
                x: 'left',
                y: 'center',
                splitList: [
                    {start: 1500},
                    {start: 900, end: 1500},
                    {start: 310, end: 1000},
                    {start: 200, end: 300},
                    {start: 10, end: 200,},
                    {start: 5, end: 5,},
                    {end: 10}
                ],
//            min: 0,
//            max: 2500,
//            calculable : true,//颜色呈条状
                text:['高','低'],// 文本，默认为数值文本
                color: ['#E0022B', '#E09107', '#A3E00B']
            },
            toolbox: {//工具栏
                show: true,
                orient : 'vertical',//工具栏 icon 的布局朝向
                x: 'right',
                y: 'center',
                feature : {//各工具配置项。
                    mark : {show: true},
                    dataView : {show: true, readOnly: false},//数据视图工具，可以展现当前图表所用的数据，编辑后可以动态更新。
                    restore : {show: true},//配置项还原。
                    saveAsImage : {show: true}//保存为图片。
                }
            },
            roamController: {//控制地图的上下左右放大缩小 图上没有显示
                show: true,
                x: 'right',
                mapTypeControl: {
                    'china': true
                }
            },
            series : [
                {
                    name: '现有确诊',
                    type: 'map',
                    mapType: 'china',
                    roam: false,//是否开启鼠标缩放和平移漫游
                    itemStyle:{//地图区域的多边形 图形样式
                        normal:{//是图形在默认状态下的样式
                            label:{
                                show:true,//是否显示标签
                                textStyle: {
                                    color: "rgb(249, 249, 249)"
                                }
                            }
                        },
                        emphasis:{//是图形在高亮状态下的样式,比如在鼠标悬浮或者图例联动高亮时
                            label:{show:true}
                        }
                    },
                    top:"3%",//组件距离容器的距离
                    data:currentConfirmedCount
                }
            ]
        };
        myChart.setOption(option);
        myChart.on('click', function (params) {
            var urlArr = ["ee.html"];//这里填写你点击每个省份要跳转的页面
            switch(params.name){
                case '新疆':
                    location.href = urlArr[0];
                    break;
                case '西藏':
                    location.href = urlArr[1];
                    break;
                case '青海':
                    location.href = urlArr[2];
                    break;
                case '甘肃':
                    location.href = urlArr[3];
                    break;
                case '内蒙古':
                    location.href = urlArr[4];
                    break;
                case '四川':
                    location.href = urlArr[5];
                    break;
                case '云南':
                    location.href = urlArr[6];
                    break;
                case '陕西':
                    location.href = urlArr[7];
                    break;
                case '重庆':
                    location.href = urlArr[8];
                    break;
                case '贵州':
                    location.href = urlArr[9];
                    break;
                case '山西':
                    location.href = urlArr[10];
                case '河南':
                    location.href = urlArr[11];
                    break;
                case '湖北':
                    location.href = urlArr[12];
                    break;
                case '湖南':
                    location.href = urlArr[13];
                    break;
                case '广西':
                    location.href = urlArr[14];
                    break;
                case '北京':
                    location.href = urlArr[15];
                    break;
                case '河北':
                    location.href = urlArr[16];
                    break;
                case '天津':
                    location.href = urlArr[17];
                    break;
                case '山东':
                    location.href = urlArr[18];
                    break;
                case '江苏':
                    location.href = urlArr[19];
                    break;
                case '安徽':
                    location.href = urlArr[20];
                    break;
                case '江西':
                    location.href = urlArr[21];
                    break;
                case '广东':
                    location.href = urlArr[22];
                    break;
                case '澳门':
                    location.href = urlArr[23];
                    break;
                case '海南':
                    location.href = urlArr[24];
                    break;
                case '上海':
                    location.href = urlArr[25];
                    break;
                case '浙江':
                    location.href = urlArr[26];
                    break;
                case '福建':
                    location.href = urlArr[27];
                    break;
                case '黑龙江':
                    location.href = urlArr[28];
                    break;
                case '吉林':
                    location.href = urlArr[29];
                    break;
                case '辽宁':
                    location.href = urlArr[30];
                    break;
                default:
                    break;
            }
        });
    })
    //}
</script>
</body>
</html>